import React, { Component } from 'react'
import { TabBar } from 'antd-mobile'
import { Route, Redirect, Switch } from 'react-router-dom'

// 引入二级路由组件
import Index from './Main'
import HouseList from './HouseList'
import News from './News'
import Profile from './Profile'

import './index.scss'

// 导航栏数据
const navData = [
  { title: '首页', icon: 'icon-ind', path: '/home/index' },
  { title: '找房', icon: 'icon-findHouse', path: '/home/list' },
  { title: '咨询', icon: 'icon-infom', path: '/home/news' },
  { title: '我的', icon: 'icon-my', path: '/home/profile' },
]
export default class Home extends Component {
  state = {
    selectedTab: this.props.location.pathname,
  };
  // 渲染TabItem项
  renderItem() {
    return navData.map(item => {
      return (
        <TabBar.Item
          title={item.title}
          key={item.icon}
          icon={<i className={`iconfont ${item.icon}`}></i>}
          selectedIcon={<i className={`iconfont ${item.icon}`}></i>}
          selected={this.state.selectedTab === item.path}
          onPress={() => {
            this.setState({
              selectedTab: item.path
            })
            this.props.history.push(item.path)
          }}
        >
        </TabBar.Item>
      )
    })
  }

  componentDidUpdate(preProps) {
    if (preProps.location.pathname !== this.props.location.pathname) {
      this.setState({ selectedTab: this.props.location.pathname })
    }
  }
  render() {
    return (
      <div className="home" >
        <Switch>
          <Route path="/home/index" component={Index} />
          <Route path="/home/list" component={HouseList} />
          <Route path="/home/news" component={News} />
          <Route path="/home/profile" component={Profile} />
          <Redirect to='/home/index' />
        </Switch>

        <TabBar
          tintColor="#21b97a"
          barTintColor="white"
        >
          {this.renderItem()}
        </TabBar>
      </div >
    )
  }
}
